import { useState,useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import API from '@/http';
import background from '@/assets/background/background.png';
import affiliateBg from '@/assets/background/affiliate-program.png';
import application from '@/assets/home/application.png';
import app_bottom_right from '@/assets/home/app_bottom_right.png';
import app_top_left from '@/assets/home/app_top_left.png';
import left_bottom from '@/assets/home/left_bottom.png';
import top_right from '@/assets/home/top_right.png';
import logo from '@/assets/logo/logo.png';
import sign from '@/assets/home/sign.svg';
import promoting from '@/assets/home/promoting.svg';
import commission from '@/assets/home/commission.svg';
import user_icon from '@/assets/home/user.svg';
import email_icon from '@/assets/home/email.svg';
import high_commission from '@/assets/home/high_commission.png';
import support_promotional from '@/assets/home/support_promotional.png';
import flexible_options from '@/assets/home/flexible_options.png';
import { message } from 'antd';

function Home() {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const applyRef = useRef<HTMLHeadingElement>(null);
  const [nickname, setNickname] = useState('');
  const [email, setEmail] = useState('');
  const [promoted, setPromoted] = useState('');
  const [isApply, setIsApply] = useState(false);

  function toLogin() {
    navigate('/login')
  }

  const scrollToSection = () => {
    if(applyRef.current){
      applyRef.current.scrollIntoView({ behavior: 'smooth' });
    }
  };

  async function feedbackPost() {
    if(!nickname){
      message.error({ content: t('home.validate.nickname') })
      return;
    }
    if(!email){
      message.error({ content: t('home.validate.email') })
      return;
    }
    const regEmail = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
    if(!regEmail.test(email)){
      message.error({ content: t('home.validate.emailreg') })
      return;
    }
    if(!promoted){
      message.error({ content: t('home.validate.plan') })
      return;
    }
    API.Home.feedback({ data: { nickname, email, plan:promoted } }).then(()=>{
      message.success({ content: t('home.validate.success') });
      setIsApply(true);
    }).catch((e)=>{
      message.error({content: t('home.validate.failed') + ": " + e.message})
    })
  }

  return (
    <div>
      <div className='relative z-[9] w-full min-h-screen overflow-hidden'>
        <img className='absolute top-0 left-0 right-0 z-0 hidden lg:block w-full object-top min-h-screen' src={background} alt="background" />
        <div className='relative z-[9] w-full min-h-screen flex flex-col items-center justify-between'>
          <div className='container relative z-[9] mt-[30vw] lg:mt-[10vw] flex flex-col lg:flex-row items-center lg:w-[80vw] mx-auto'>
            <div className='flex-1 flex items-center justify-center'>
              <div className='relative'>
                <img className='relative z-10 w-[246px]' src={application} alt="application" />
                <img className='absolute top-[-62px] right-[-125px] w-[96px] max-w-24' src={top_right} alt="icon" />
                <img className='absolute top-[13px] left-[-75px] w-[126px] max-w-32' src={app_top_left} alt="icon" />
                <img className='absolute bottom-0 left-[-220px] w-[156px] max-w-40' src={left_bottom} alt="icon" />
                <img className='absolute bottom-[-7px] right-[-12.8vw] w-[18.5vw] max-w-96' src={app_bottom_right} alt="icon" />
              </div>
            </div>
            <div className='relative z-[10] p-5 flex-1 flex items-center justify-center'>
              <div className='max-w-lg'>
                <div>
                  <img className='h-[48px] mx-auto lg:mx-0' src={logo} alt="logo" />
                </div>
                <div className='relative w-[230px] lg:w-[335px] h-[50px] lg:h-[80px] box-border pt-4 lg:pt-7 mx-auto lg:mx-0'>
                  <img className='absolute top-0 z-[-1] h-full' src={affiliateBg} alt="affiliate-program" />
                  <h1 className='text-xl lg:text-3xl text-white font-bold ml-4'>Affiliate Program</h1>
                </div>
                <h3 className='text-center lg:text-left mt-10 mb-3 font-semibold text-black text-sm lg:text-xl'>{t('home.earnUp')}<span className='text-30 font-extrabold mx-2'>30%</span>{t('home.customer')}</h3>
                <p className='text-sm font-normal text-7b leading-5'>{t('home.joinIn')}</p>
              </div>
            </div>
          </div>
          <div className='relative mx-auto pb-5 z-[9] flex flex-col lg:flex-row items-center justify-center'>
            <button className='shadow-lg text-base rounded-full bg-[#4bc0c0] px-8 py-2 text-white' onClick={scrollToSection}>{t('home.become')}</button>
            <button className='mt-6 lg:mt-0 lg:ml-12 text-base underline underline-offset-4' onClick={() => toLogin()}>{t('home.log')}</button>
          </div>
          <div className='relative z-[9] bg-[#5FCACA] w-full h-[42px]'></div>
        </div>
      </div>
      <div className='w-full mx-auto flex flex-col items-center justify-evenly min-h-screen bg-[#F3F3F3]'>
        <div className='container w-full'>
          <h2 className='text-center text-24 lg:text-30 font-semibold py-10'>{t('home.signUpText')}</h2>
          <div className='p-5 lg:p-0 w-full flex flex-col lg:flex-row items-baseline justify-center'>
            <div className='flex items-baseline lg:items-start'>
              <img className='w-[50px] lg:w-[78px] lg:h-[78px]' src={sign} alt="sign" />
              <div className='mx-4 lg:mx-8'>
                <div className='w-full h-[1px] lg:mt-[38px] mb-[28px] bg-[#5FCACA]'></div>
                <h2 className='text-22 lg:text-24 text-black'>{t('home.reg.step1.title')}</h2>
                <p className='max-w-[263px] text-14 text-7b'>{t('home.reg.step1.content')}</p>
              </div>
            </div>
            <div className='flex'>
              <img className='w-[50px] lg:w-[78px] lg:h-[78px]' src={promoting} alt="sign" />
              <div className='mx-4 lg:mx-8'>
                <div className='w-full h-[1px] mt-[38px] mb-[28px] bg-[#5FCACA]'></div>
                <h2 className='text-22 lg:text-24 text-black'>{t('home.reg.step2.title')}</h2>
                <p className='max-w-[263px] text-14 text-7b'>{t('home.reg.step2.content')}</p>
              </div>
            </div>
            <div className='flex'>
              <img className='w-[50px] lg:w-[78px] lg:h-[78px]' src={commission} alt="sign" />
              <div className='mx-4 lg:mx-8'>
                <div className='w-full h-[1px] mt-[38px] mb-[28px] bg-[#5FCACA]'></div>
                <h2 className='text-22 lg:text-24 text-black'>{t('home.reg.step3.title')}</h2>
                <p className='max-w-[263px] text-14 text-7b'>{t('home.reg.step3.content')}</p>
              </div>
            </div>
          </div>
        </div>
        <div className='container w-full px-5 lg:px-0'>
          <h2 className='text-center text-24 lg:text-30 font-semibold pt-10 lg:pt-20 pb-5'>{t('home.advantages')}</h2>
          <p className='text-center text-14 text-7b pb-5 lg:pb-10'>{t('home.programSupoort')}</p>
          <div className='flex flex-col lg:flex-row lg:items-baseline justify-center'>
            <div className='flex flex-col items-center justify-center mb-6 lg:mb-0 lg:mx-4'>
              <img className='w-[480px] lg:h-[380px] rounded-lg' src={high_commission} alt="high_commission" />
              <div className='w-[324px] text-center'>
                <h3 className='font-medium mt-4 lg:mt-8 mb-1'>{t('home.affiliates.ad1.title')}</h3>
                <p className='text-14 text-7b'>{t('home.affiliates.ad1.content')}</p>
              </div>
            </div>
            <div className='flex flex-col items-center justify-center mb-6 lg:mb-0 lg:mx-4'>
              <img className='w-[480px] lg:h-[380px] rounded-lg' src={support_promotional} alt="high_commission" />
              <div className='w-[324px] text-center'>
                <h3 className='font-medium mt-4 lg:mt-8 mb-1'>{t('home.affiliates.ad2.title')}</h3>
                <p className='text-14 text-7b'>{t('home.affiliates.ad2.content')}</p>
              </div>
            </div>
            <div className='flex flex-col items-center justify-center mb-6 lg:mb-0 lg:mx-4'>
              <img className='w-[480px] lg:h-[380px] rounded-lg' src={flexible_options} alt="high_commission" />
              <div className='w-[324px] text-center'>
                <h3 className='font-medium mt-4 lg:mt-8 mb-1'>{t('home.affiliates.ad3.title')}</h3>
                <p className='text-14 text-7b'>{t('home.affiliates.ad3.content')}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div ref={applyRef} className='w-full mx-auto flex flex-col items-center justify-baseline min-h-screen bg-[#F3F3F3]'>
        <div className='container p-5 lg:p-10'>
          <div className='w-full mx-auto p-5 lg:p-20 flex flex-col items-center justify-center rounded-sm lg:rounded-[50px] bg-white/50'>
            <h1 className='text-black text-24 lg:text-30 text-center font-semibold pb-5'>{t('home.join724')}</h1>
            <p className='text-14 text-7b pb-10'>{t('home.join724desc')}</p>
            <div className='flex flex-col lg:flex-row'>
              <div className='lg:w-[30vw] lg:pr-20'>
                <h3 className='text-black pb-5'>{t('home.forfree')}</h3>
                <p className='text-14 text-7b max-w-[60rem] pb-5'>{t('home.welcomeJoin')}</p>
                <div className='pb-5'>
                  <p className='text-14 text-7b'>{t('home.nowJoinGet')}</p>
                  <ul className='pb-5 pl-5 list-disc'>
                    <li className='text-14 text-7b'>{t('home.nowJoinList1')}</li>
                    <li className='text-14 text-7b'>{t('home.nowJoinList2')}</li>
                    <li className='text-14 text-7b'>{t('home.nowJoinList3')}</li>
                  </ul>
                  <p className='text-14 text-7b'>{t('home.regnow')}</p>
                </div>
              </div>
              { isApply ? <div className='lg:w-[20vw]'>
                <h3 className='pb-5'>{t('home.submited.title')}</h3>
                <p className='text-14 text-7b'>{t('home.submited.thankss')}</p>
                <p className='text-14 text-7b'>{t('home.submited.servers')}</p>
                <p className='text-14 text-7b'>{t('home.submited.anyquestion')}</p>
                <p className='text-14 text-7b'>support@huixiaoinvestment.co.uk.</p>
              </div> : <div className='lg:w-[20vw]'>
                <h3 className='pb-5'>{t('feedback')}</h3>
                <div className='h-11 px-4 flex items-center rounded-full bg-white/60 border border-7b w-full max-w-[25rem] mb-3'>
                  <img src={user_icon} alt="user_icon" />
                  <input className='ml-1 flex-1 outline-none bg-transparent' value={nickname} onChange={(e) => setNickname(e.target.value)} type="text" placeholder={t('home.feedbackInput.name')} />
                </div>
                <div className='h-11 px-4 flex items-center rounded-full bg-white/60 border border-7b w-full max-w-[25rem] mb-3'>
                  <img src={email_icon} alt="user_icon" />
                  <input className='ml-1 flex-1 outline-none bg-transparent' value={email} onChange={(e) => setEmail(e.target.value)} type="text" placeholder={t('home.feedbackInput.email')} />
                </div>
                <div className='h-32 px-4 py-4 flex items-center rounded-3xl bg-white/60 border border-7b w-full max-w-[25rem]'>
                  <textarea className='ml-1 w-full h-full flex-1 outline-none bg-transparent resize-none' value={promoted} onChange={(e) => setPromoted(e.target.value)} placeholder={t('home.feedbackInput.howpromote')} />
                </div>
              </div> }
            </div>
            <button disabled={isApply} className={`mt-10 min-w-80 shadow-lg text-base rounded-full px-8 py-2 ${ isApply ? 'text-black bg-[#F3F3F3]' : 'text-white bg-[#4bc0c0]'}`} onClick={() =>feedbackPost()}>{isApply ? t('home.sendnow') : t('home.nowJoin')}</button>
          </div>
          <div className='container lg:flex flex-wrap grid gap-4 grid-cols-2 lg:flex-row items-center justify-evenly pt-5 lg:pt-20'>
            <div className='flex flex-col items-center justify-center'>
              <div className='w-28 h-28 bg-[#77D6D6] rounded-full flex items-center justify-center'><h1 className='text-white text-30 font-bold'>360<span className='text-20'>+</span></h1></div>
              <p className='mt-4'>{t('home.datanumber.desc1')}</p>
            </div>
            <div className='flex flex-col items-center justify-center'>
              <div className='w-28 h-28 bg-[#77D6D6] rounded-full flex items-center justify-center'><h1 className='text-white text-30 font-bold'>1200<span className='text-20'>+</span></h1></div>
              <p className='mt-4'>{t('home.datanumber.desc2')}</p>
            </div>
            <div className='flex flex-col items-center justify-center'>
              <div className='w-28 h-28 bg-[#77D6D6] rounded-full flex items-center justify-center'><h1 className='text-white text-30 font-bold'><span className='text-20'>£</span>5.5<span className='text-20'>m+</span></h1></div>
              <p className='mt-4'>{t('home.datanumber.desc3')}</p>
            </div>
            <div className='flex flex-col items-center justify-center'>
              <div className='w-28 h-28 bg-[#77D6D6] rounded-full flex items-center justify-center'><h1 className='text-white text-30 font-bold'>100<span className='text-20'>%</span></h1></div>
              <p className='mt-4'>{t('home.datanumber.desc4')}</p>
            </div>
          </div>
          <div className='container pt-20'>
            <h1 className='text-24 lg:text-30 font-semibold pb-10 text-center'>{t('FAQ')}</h1>
            <div className='py-5'>
              <h3 className='text-20 font-semibold pb-2'>{t('home.question1.title')}</h3>
              <p className='text-14 text-7b'>{t('home.question1.ask')}</p>
            </div>
            <div className='py-5'>
              <h3 className='text-20 font-semibold pb-2'>{t('home.question2.title')}</h3>
              <p className='text-14 text-7b'>{t('home.question2.ask')}</p>
            </div>
            <div className='py-5'>
              <h3 className='text-20 font-semibold pb-2'>{t('home.question3.title')}</h3>
              <p className='text-14 text-7b'>{t('home.question3.ask')}</p>
            </div>
            <div className='py-5'>
              <h3 className='text-20 font-semibold pb-2'>{t('home.question4.title')}</h3>
              <p className='text-14 text-7b pb-3'>{t('home.question4.ask1')}</p>
              <p className='text-14 text-7b pb-3'>{t('home.question4.ask2')}</p>
              <p className='text-14 text-7b'>{t('home.question4.ask3')}</p>
              <p className='text-14 text-7b'>{t('home.question4.ask4')}</p>
              <ul className='pl-5 list-disc'>
                <li className='text-14 text-7b'>{t('home.question4.ask4list1')}</li>
                <li className='text-14 text-7b'>{t('home.question4.ask4list2')}</li>
                <li className='text-14 text-7b'>{t('home.question4.ask4list3')}</li>
                <li className='text-14 text-7b'>{t('home.question4.ask4list4')}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Home;
